<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget Palette Dojo GridX Tests (Basic)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget Palette Dojo GridX Tests (Basic)</h1>
	
	<h2 class="test_section">Comma separated data</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps" >
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. Choose <i>Comma separated data</i> from the drop down list on the first panel of the wizard.</li>
		<li>Change the data in the text area to: </li>
		<pre>
one, two, three
data 1, data 2, data 3
xxxx, yyy, zzz
111, 222, 3333
		</pre>
		<li>Click Finish.</li>
		<li>The GridX should be updated with the data you entered. In addition, the grid's width should be 100%.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data entered</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The GridX in page editor and preview should be displaying the data you just entered.</li>
		<li>You should see 3 columns with the headers one, two and three.</li>
		<li>You should see 3 rows of data, corresponding to the data you entered.</li>
	</ol>
	<h2 class="test_section">Smart Input (GridX Configuration Wizard)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. 
		<li>Verify the SmartInput is a modal dialog containing a wizard.</li>
		<li>Verify the wizard contains three panels (one for data source set-up, one for column selection, and one for previewing the grid and resizing/reordering columns):</li>
			<ul>
				<li>Click the Next button 2 times and then the Back button two times to verify you can go to the end of the wizard and back (seeing the 3 steps along the way).</li>
				<li>Along the top of the dialog there should be a clickable heading for each step. Click on each heading and verify the corresponding wizard page is selected.</li>
			</ul>
		<li>On the first panel:</li>
			<ul>
				<li>Mouse down and hold on the icon in the button right corner of the text area. Drag to re-size the the text area.</li>
				<li>Click on the <b>?</b> icon to display the help.</li>
				<li>Click on the <b>?</b> icon to hide the help.</li>
			</ul>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The user should see a modal dialog containing a wizard.</li>
		<li>The user should be able to navigate through the 3 steps of the wizard with Next/Back buttons or the clickable headings.
		<li>On the first panel, the user should be able to re-size the text area and display/hide help.</li>
	</ol>
	
	<h2 class="test_section">Canceling the wizard</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. Choose <i>Comma separated data</i> from the drop down list</li>
		<li>Change the data in the text area to:</li>
<pre>
one, two, three
data 1, &lt;b&gt;data 2&lt;/b&gt;, data 3
xxxx, yyy, zzz
111, 222, 3333
</pre>
		<li>NOTE: The UI should <i>not</i> change despite the presence of HTML tags. Unlike DataGrid, GridX does not support specifying the use of Plan Text vs. HTML Markup.
		<li>Click the <i>Cancel</i> button.</li>
		<li>The GridX should be be displayed with the default data, not the data you entered.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the default data.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The GridX in page editor and preview should be displaying the default data.</li>
		<img height="138" src="images/image01.jpg" width="309">
	</ol>
	
	<h2 class="test_section">Data file from workspace</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. Choose <i>Data file from workspace</i> from the drop down list on the first panel of the wizard.</li>
		<li>Click on the folder icon.</li>
		<li>The select a source dialog will be displayed, navigate to the <i>samples/sample_data folder</i> and then select the <i>htmlSample.json</i> file. Click the OK button</li>
		<li>The text area should now display the text <i>samples/sample_data/htmlSample.json</i> Unlike DataGrid, radio buttons to specify plain text or HTML markup should <i>not</i>
		be displayed.
		<li>Click the Finish button on the wizard.</li>
		<li>The GridX should be updated with the data from the htmlSample file. Notice that the data is displayed with HTML markup rendered (e.g., <b>Fruits</b> is made bold).</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data from the file.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The GridX in page editor and preview should be displaying the data from the file.</li>
		<img height="149" src="images/image00.jpg" width="301">
	</ol>

	<h2 class="test_section">Data from URL (JSONP)</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps" >
		<li>Continuing from the test case above, open the HTML File from the <i>Data from workspace</i> test case.</li>
		<li>Double click on the GridX Widget in the design view to display the smart input.</li>
		<li>SmartInput is displayed. Choose <i>Data from URL (JSONP)</i> from the drop down list on the first panel.</li>
		<li>In the text area enter the following URL: <i>http://maqettaservice.appspot.com/sampleservice</i></li>
		<li>Click the Finish button on the wizard.</li>
		<li>The GridX should be updated with the data from the service. Notice that the data is displayed with HTML tags rendered (for example <b>Fruits</b>).</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data from the service.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults" >
		<li>The GridX in page editor and preview should be displaying the data from the file. </li>
		<img height="149" src="images/image00.jpg" width="301">
	</ol>
	
	<h2 class="test_section">Comma separated data (with empty cells)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps" >
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. Choose <i>Comma separated data</i> from the drop down list on the first panel of the wizard.</li>
		<li>Change the data in the text area to the following (note empty cells in the 2nd column of the first two rows): </li>
		<pre>
Date de début,Date de fin,Code UT,Intitulé UT
03/03/2012,,UT3,Unité de Travail Trois
02/02/2011,,UT2,Unité de Travail Deux
01/01/2010,31/12/2012,UT1,Unité de Travail Un
		</pre>
		<li>Click Finish.</li>
		<li>The GridX should be updated with the data you entered to show 4 columns of data.</li>
		<img src="images/gridXEmptyCells.png" >
		<li>Double-click the GridX to reopen smart input. Ensure that the data looks the same as when you pasted it in originally. In particular, ensure the
		    2nd column is present and the empty cells in the first two rows are reflected.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data entered</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The GridX in page editor and preview should be displaying the data you just enter.</li>
		<li>You should see 4 columns with the headers specified in your data.</li>
		<li>You should see 3 rows of data, corresponding to the data you entered.
		<li>Reopening smart input should show exactly the same data as what you pasted in originally.</li>
	</ol>
	
	<h2 class="test_section">CSV Data file from workspace</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the GridX widget onto the canvas.</li>
		<li>SmartInput is displayed. Choose <i>Data file from workspace</i> from the drop down list on the first panel of the wizard.</li>
		<li>Click on the folder icon.</li>
		<li>The select a source dialog will be displayed, navigate to the <i>samples/sample_data folder</i> and then select the <i>sample.csv</i> file. Click the OK button</li>
		<li>The text area should now display the text <i>samples/sample_data/sample.csv</i></li>
		<li>Click the Finish button on the wizard.</li>
		<li>The GridX should be updated with the data from the <i>sample.csv</i> file.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data from the file.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The GridX in page editor and preview should be displaying the data from the file.</li>
		<img src="images/gridX_4_CSV_file.png">
	</ol>
	
	<h2 class="test_section">Switching Between File & Data Source Types</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Continuing with the file from the previous section, double-click on the GridX to bring up smart input.</li>
		<li>SmartInput is displayed. The <i>Data file from workspace</i> option should still be selected and the text field should contain 
			<i>samples/sample_data/sample.csv</i>.</li>
		<li>Click on the folder icon.</li>
		<li>The select a source dialog will be displayed, navigate to the <i>samples/sample_data folder</i> and then select the <i>sampleManyColumns.json</i> file. Click the OK button</li>
		<li>Click the Finish button on the wizard.</li>
		<li>The GridX should be updated with the data from the <i>sampleManyColumns.json</i> file.</li>
		<img src="images/gridX_ManyColumnsNoResizing.png">
		<li>Double-click on the GridX to bring up smart input.</li>
		<li>SmartInput is displayed. The <i>Data file from workspace</i> option should still be selected and the text field should contain 
			<i>samples/sample_data/sampleManyColumns.json</i>.</li>
		<li>Click on the folder icon.</li>
		<li>The select a source dialog will be displayed, navigate to the <i>samples/sample_data folder</i> and then select the <i>sample.json</i> file. Click the OK button</li>
		<li>Click the Finish button on the wizard.</li>
		<li>The GridX should be updated with the data from the <i>sample.json</i> file.</li>
		<img src="images/gridX_SampleJSON.png">
		<li>Double-click on the GridX to bring up smart input.</li> 
		<li>SmartInput is displayed. The <i>Data file from workspace</i> option should still be selected and the text field should contain 
			<i>samples/sample_data/sample.json</i>.</li>
		<li>Choose <i>Comma separated data</i> from the drop down list on the first panel of the wizard.</li>
		<li>The text area should be empty. Enter the following: </li>
		<pre>
one, two, three
data 1, data 2, data 3
xxxx, yyy, zzz
111, 222, 3333
		</pre>
		<li>Click Finish.</li>
		<li>The GridX should be updated with the data you entered.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the grid should be displayed with the data from the file.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
</body>
</html>
